<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>图片预览</title>
    <link rel="icon" type="image/png" href="icon.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="static/js/errors.js"></script>
    <script src="static/js/jquery.min.js"></script>
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/bootstrap/js/bootstrap.bundle.min.js"></script>
    <link href="static/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
    <script src="static/clipboard/dist/clipboard.min.js"></script>
    <script src="static/js/GetQueryString.js"></script>
  </head>
  <body style="background-color: whitesmoke">
    <div class="modal fade" id="copy_tip" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">
              <i class="bi bi-check-circle"></i>
              提示
            </h1>
            <button class="btn-close" title="关闭" data-bs-dismiss="modal" aria-label="关闭"></button>
          </div>
          <div class="modal-body">
            <i class="bi bi-clipboard-check"></i>
            复制<sapn class="text-primary"><strong>成功</strong></sapn>！
          </div>
          <div class="modal-footer">
            <button class="btn btn-outline-primary" title="确定" data-bs-dismiss="modal">
              <i class="bi bi-check-lg"></i>
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="container-xxl bg-light text-black">
      <center>
        <img class="rounded" id="image_shower" width="90%">
        <div class="btn-group" style="width: 90%">
          <a class="btn btn-outline-primary" id="view_btn" title="查看原图片" target="_blank" style="width: 70%">查看原图片</a>
          <a class="btn btn-outline-dark" title="其它" href="#other" style="width: 30%">其它</a>
        </div>
      </center>
      <h6 class="display-6" id="other">其它</h4>
      <h4 class="h4">原图片链接</h6>
      <div class="card" style="width: 100%">
        <code id="other_1_show"></code>
      </div>
      <button class="btn btn-outline-primary" title="复制" data-bs-toggle="modal" data-bs-target="#copy_tip" id="other_1_copy">
        <i class="bi bi-clipboard"></i>
        复制
      </button>
      <h4 class="h4">预览器链接</h4>
      <div class="card" style="width: 100%">
        <code id="other_2_show"></code>
      </div>
      <button class="btn btn-outline-primary" title="复制" data-bs-toggle="modal" data-bs-target="#copy_tip" id="other_2_copy">
        <i class="bi bi-clipboard"></i>
        复制
      </button>
      <h4 class="h4">原图片嵌入</h4>
      <div class="card" style="width: 100">
        <code id="other_3_show"></code>
      </div>
      <button class="btn btn-outline-primary" title="复制" data-bs-toggle="modal" data-bs-target="#copy_tip" id="other_3_copy">
        <i class="bi bi-clipboard"></i>
        复制
      </button>
      <h4 class="h4">预览器嵌入</h4>
      <div class="card" style="width: 100%">
        <code id="other_4_show"></code>
      </div>
      <button class="btn btn-outline-primary" title="复制" data-bs-toggle="modal" data-bs-target="#copy_tip" id="other_4_copy">
        <i class="bi bi-clipboard"></i>
        复制
      </buton>
    </div>
    <script>
      image = GetQueryString("image"); 
      document.getElementById("image_shower").src = image; 
      document.getElementById("view_btn").href = image; 
      clipboard = new ClipboardJS(".btn"); 
      other_1 = image; 
      document.getElementById("other_1_show").innerText = other_1; 
      document.getElementById("other_1_copy").setAttribute("data-clipboard-text", other_1); 
      other_2 = `${location.href}#`.substr(0, `${location.href}#`.lastIndexOf("#")); 
      document.getElementById("other_2_show").innerText = other_2; 
      document.getElementById("other_2_copy").setAttribute("data-clipboard-text", other_2); 
      other_3 = `<img src="${other_1}">`; 
      document.getElementById("other_3_show").innerText = other_3; 
      document.getElementById("other_3_copy").setAttribute("data-clipboard-text", other_3); 
      other_4 = `<iframe src="${other_2}"></iframe>`; 
      document.getElementById("other_4_show").innerText = other_4; 
      document.getElementById("other_4_copy").setAttribute("data-clipboard-text", other_4); 
    </script>
  </body>
</html>
